<template>
  <a-form-model-item
    :label="label"
    :prop="name ? name : prop"
    :rules="fnRules()"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
  >
    <a-input
      class="readonlyInput"
      v-if="readonly"
      v-model="value"
      :placeholder="placeholder"
      disabled
      :suffix="suffix"
    >
    </a-input>
    <template v-else>
      <a-col :span="12">
        <a-input-number
          v-model="value[0]"
          :placeholder="placeholder"
          :max="max"
          :min="min"
          :step="step"
          :precision="precision"
          :disabled="disabled"
          :formatter="fnFormatter"
          :parser="fnParser"
          style="width: 100%;"
          @change="(e => { handleChange(e, 0) })"
        >
        </a-input-number>
      </a-col>
      <a-col :span="12">
        <a-input-number
          v-model="value[1]"
          :placeholder="placeholder"
          :max="max"
          :min="min"
          :step="step"
          :precision="precision"
          :disabled="disabled"
          :formatter="fnFormatter"
          :parser="fnParser"
          style="width: 100%;"
          @change="(e => { handleChange(e, 1) })"
        >
        </a-input-number>
      </a-col>
    </template>
  </a-form-model-item>
</template>

<script>
export default {
  name: 'ResealInputNumber',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 循环中使用的检验值
    name: {
      type: String,
      default: ''
    },
    // label格数
    labelCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // input格数
    wrapperCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 最大值
    max: {
      type: Number,
      default: 23
    },
    // 最小值
    min: {
      type: Number,
      default: 0
    },
    step: {
      type: Number,
      default: 1
    },
    // 小数点后位数
    precision: {
      type: Number,
      default: 0
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    },
    // 输入框前部内容 未开发
    // prefix: {
    //   type: String,
    //   default: ''
    // },
    // 输入框后部内容
    suffix: {
      type: String,
      default: '点'
    },
    // 默认必填
    isRequired: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    parentData: function() {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    }
  },
  watch: {
    parentData: {
      handler: function(n) {
        this.value = n;
      },
      immediate: true
    }
  },
  data() {
    var validatorTimeIdentical = (rule, value, callback) => {
      if (this.value[0] !== null && this.value[1] !== null) {
        if (this.value[0] === this.value[1]) {
          callback(new Error('开始时间与结束时间不能相同'));
        } else if (this.value[0] > this.value[1]) {
          callback(new Error('开始时间不能大于结束时间'));
        } else {
          callback();
        }
      } else {
        if (this.isRequired) {
          callback(new Error('请选择' + this.label));
        } else {
          callback();
        }
      }
    };
    return {
      value: [null, null],
      validatorTimeIdentical: validatorTimeIdentical
    };
  },
  methods: {
    /**
     * [fnRules 必填校验]
     * @return {[type]} [description]
     */
    fnRules() {
      if (this.isRequired) {
        return { required: true, validator: this.validatorTimeIdentical, trigger: 'blur' };
      } else {
        return { validator: this.validatorTimeIdentical, trigger: 'blur' };
      }
    },
    fnFormatter(value) {
      return `${value}` + this.suffix;
    },
    fnParser(value) {
      if (this.suffix) {
        value = value.replace(this.suffix, '');
      }
      return value;
    },
    handleChange(e, index) {
      this.value[index] = e;
      this.$emit('change', this.value);
      this.analysisAttribute(this.form, this.value);
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0 || val === '') {
        if (length !== 1) {
          index++;
        }
        // object[arr[index]] = val;
        this.$set(object, arr[index], val);
      } else {
        return object;
      }
    }
  }
};
</script>
<style>
  .readonlyInput .ant-input[disabled]{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
</style>
